<template>
  <div class="coffee_machine_record">
    <c-title :hide="false" text="收入明细"></c-title>
    <div class="navSelect">
      <div class="navSelect_Lis">
        <van-popover v-model="value1" trigger="click">
          <div v-for="item in option1" :key="item.id" class="mpop" @click="typeTap(item)">
            {{ item.name }}
          </div>
          <template #reference>{{ setRole }} <i class="iconfont icon-icon_down1"></i></template>
        </van-popover>
      </div>
      <div class="navSelect_Lis">
        <van-popover v-model="value2" trigger="click">
          <div v-for="item in option2" :key="item.status" @click="statusTap(item)" class="mpop">
            {{ item.name }}
          </div>
          <template #reference>{{ setStatusName }} <i class="iconfont icon-icon_down1"></i></template>
        </van-popover>
      </div>
      <div class="navSelect_Lis" @click="dayShow = true">
        {{ isNowDay ? isNowDay : "选择日期" }}
        <i class="iconfont icon-icon_down1"></i>
      </div>
    </div>
    <div class="list">
      <div class="lis" v-for="(item, index) in listInfo" :key="index">
        <div class="left">
          <div class="order">订单编号：{{ item.order_sn }}</div>
          <div class="equipment">角色类型：{{ item.has_one_role.name }}</div>
          <div class="address">{{ item.actual_settle_time_str ? item.actual_settle_time_str : item.expect_settle_time_str }}</div>
        </div>
        <div class="right">
          <div class="total">+{{ item.reward_amount }}</div>
          <div class="status">{{ item.status_name }}</div>
        </div>
      </div>
    </div>
    <van-popup v-model="dayShow" position="bottom" :style="{ height: '30%' }">
      <van-datetime-picker v-model="currentDate" type="date" title="选择年月日" @cancel="dayShow = false" @confirm="dayShowConfirm" :max-date="maxDate" />
    </van-popup>
  </div>
</template>
<script>
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin], //加载更多
  data() {
    return {
      value1: false,
      value2: false,
      option1: [],
      option2: [],
      isNowDay: "",
      dayShow: false,
      currentDate: new Date(),
      maxDate: new Date(),
      day: "",
      role_id: "",
      statusL: "",
      listInfo: [],

      isLoadMore: true,
      page: 1,
      total_page: 0
    };
  },
  activated() {
    this.getSelect();
    this.getData();
  },
  computed: {
    setStatusName() {
      if (this.option2.length <= 0) return "结算状态";
      if (!this.statusL) return "结算状态";
      for (let index = 0; index < this.option2.length; index++) {
        const element = this.option2[index];
        if (element.status == this.statusL) {
          console.log(element.name);
          return element.name;
        }
      }
    },
    setRole() {
      if (this.option1.length <= 0 || !this.role_id) return "角色类型";
      for (let index = 0; index < this.option1.length; index++) {
        const element = this.option1[index];
        if (element.id == this.role_id) {
          return element.name;
        }
      }
    }
  },
  methods: {
    init() {
      this.value1 = false;
      this.value2 = false;
      this.isNowDay = "";
      this.dayShow = false;
    },
    dayShowConfirm(value) {
      if (this.fun.isIosOrAndroid() == "ios") {
        this.isNowDay = this.fun.dateFormat("YYYY/mm/dd", value);
      } else {
        this.isNowDay = this.fun.dateFormat("YYYY-mm-dd", value);
      }
      this.dayShow = false;
      this.getData();
    },
    statusTap(item) {
      this.value2 = false;
      this.statusL = item.status;
      this.getData();
    },
    typeTap(item) {
      this.value1 = false;
      this.role_id = item.id;
      this.getData();
    },
    getSelect() {
      let urlstr = this.$route.name == 'energy_machine_record'?"plugin.energy-machine.frontend.owner.getSelect":"plugin.coffee-machine.frontend.owner.getSelect"
      $http.post(urlstr, { machine_id: this.$route.params.machine_id }, "loading").then(response => {
        if (response.result == 1) {
          console.log(response.data, "dddddddd");
          this.option1 = response.data.role_list;
          this.option2 = response.data.commission_status;
          console.log(this.option1, this.option2);
        } else {
          this.$toast(response.msg);
        }
      });
    },
    getData() {
      let json = {
        machine_id: this.$route.params.machine_id,
        day: this.isNowDay,
        role_id: this.role_id ? this.role_id : "",
        status: this.statusL ? this.statusL : ""
      };
      let urlstr = this.$route.name == 'energy_machine_record'?"plugin.energy-machine.frontend.owner.incomeList":"plugin.coffee-machine.frontend.owner.incomeList"
      $http.post(urlstr, json, "loading").then(response => {
        if (response.result == 1) {
          console.log(response);
          this.listInfo = response.data.data;
          this.isLoadMore = true;
          this.total_page = response.data.last_page;
          if (!this.total_page) {
            this.total_page = 0;
          }
        } else {
          this.$toast(response.msg);
        }
      });
    },
    getMoreData() {
      this.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page = this.page + 1;
        let urlstr = this.$route.name == 'energy_machine_record'?"plugin.energy-machine.frontend.owner.incomeList":"plugin.coffee-machine.frontend.owner.incomeList"
        $http
          .get(
            urlstr,
            {
              page: this.page
            },
            "加载中"
          )
          .then(
            response => {
              this.isLoadMore = true;
              if (response.result === 1) {
                var myData = response.data.data;
                this.listInfo = this.listInfo.concat(myData); //数组拼接
              } else {
                this.page = this.page - 1;
                this.isLoadMore = false;
                return;
              }
            },
            function(response) {
              // error callback
            }
          );
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.list {
  display: flex;
  padding: 0.5rem 0.75rem;
  box-sizing: border-box;
  flex-direction: column;
  .lis {
    flex: 1;
    margin-top: 0.5rem;
    padding: 0.75rem;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    .left {
      flex: 1;
      text-align: left;
      overflow: hidden;
      .order {
        font-size: 0.88rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .equipment,
      .address {
        font-size: 0.75rem;
        color: #999999;
        margin-top: 0.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .right {
      max-width: 6.25rem;
      flex-shrink: 0;
      margin-left: 0.5rem;
      .total {
        font-size: 0.88rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: pre-wrap;
      }
      .status {
        font-size: 0.75rem;
        color: #999999;
      }
    }
  }
}
.navSelect {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #fff;

  .navSelect_Lis {
    flex: 1;
    justify-content: center;
    align-items: center;
    display: flex;
    padding: 0.94rem 0;
    box-sizing: border-box;
    font-size: 0.88rem;
    .icon-icon_down1 {
      font-size: 0.375rem;
      margin-left: 0.2rem;
      color: #999999;
    }
  }
}
.mpop {
  margin: 0 1.13rem;
  padding: 0.75rem 0;
  border-bottom: 0.0313rem solid #f0f0f1;
  text-align: center;
}
.mpop:last-child {
  border-bottom: 0;
}
</style>
